<template>
  <div class="page-wrapper">
    <el-container>
      <el-aside width="200px" style="height: 550px;">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <el-menu-item v-for="category in categories" :key="category.id" :index="category.id.toString()">
            {{ category.name }}
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div v-if="selectedCategory">
          <h2>{{ selectedCategory.name }}</h2>
          <div v-for="flower in selectedCategory.flowers" :key="flower.id" class="flower-item">
            <img :src="flower.image" alt="flower" class="flower-image">
            <div class="flower-details">
              <div class="flower-name">{{ flower.name }}</div>
              <div class="flower-description">{{ flower.description }}</div>
              <div class="flower-price">价格: 69¥{{ flower.price }}</div>
              <el-button type="primary" icon="el-icon-shopping-cart-full" @click="addToCart(flower)">加入购物车</el-button>
            </div>
          </div>
        </div>
        <div v-else>
          <p>请在左边选择花的类别</p>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// import { ElButton, ElIconShoppingCartFull } from 'element-plus';
import { ElContainer, ElAside, ElMain, ElMenu, ElMenuItem, ElButton } from 'element-plus';
// 假设的花店数据
const categories = ref([
  {
    id: 1,
    name: '鲜花',
    flowers: [
      { id: 1, name: '玫瑰', image: '/src/store/玫瑰花.jpg' },
      { id: 2, name: '郁金香', image: '/src/store/郁金香.jpg' },
      { id: 3, name: '百合', image: '/src/store/白百合.jpg' },
      { id: 4, name: '康乃馨', image: '/src/store/康乃馨.jpg' },
      { id: 5, name: '满天星', image: '/src/store/满天星.jpg' },
      // ...更多花
    ]
  },
  {
    id: 2,
    name: '干花',
    flowers: [
      { id: 3, name: '干玫瑰', image: '/src/store/干玫瑰花.jpg' },
      { id: 6, name: '干薰衣草', image: '/src/store/干薰衣草.jpg' },
      { id: 7, name: '干勿忘我', image: '/src/store/干勿忘我.jpg' },
      { id: 8, name: '干满天星', image: '/src/store/干满天星.jpg' },
      // ...更多干花
    ]
  },
  {
    id: 3,
    name: '盆栽',
    flowers: [
      { id: 4, name: '仙人掌', image: '/src/store/仙人掌.jpg' },
      { id: 5, name: '多肉植物', image: '/src/store/多肉.jpg' },
      { id: 9, name: '绿萝', image: '/src/store/绿萝.jpg' },
      { id: 10, name: '吊兰', image: '/src/store/吊兰.jpg' },
      { id: 11, name: '富贵竹', image: '/src/store/富贵竹.jpg' },
     
    ]
  },
  {
    id: 4,
    name: '花束',
    flowers: [
      { id: 6, name: '情人节花束', image: '/src/store/情人节花束.jpg' },
      { id: 7, name: '母亲节花束', image: '/src/store/母亲节花束.jpg' },
      { id: 12, name: '生日花束', image: '/src/store/生日花束.jpg' },
      { id: 13, name: '毕业花束', image: '/src/store/毕业花束.jpg' },
      
    ]
  },
  {
    id: 5,
    name: '花篮',
    flowers: [
      { id: 8, name: '水果花篮', image: 'url-to-your-image/fruit-basket.jpg' },
      { id: 9, name: '毕业花篮', image: 'url-to-your-image/graduation-basket.jpg' },
      { id: 14, name: '生日花篮', image: 'url-to-your-image/birthday-basket.jpg' },
      { id: 15, name: '感谢花篮', image: 'url-to-your-image/thank-you-basket.jpg' },
      
    ]
  },
  {
    id: 6,
    name: '香草',
    flowers: [
      { id: 10, name: '薰衣草', image: 'url-to-your-image/lavender.jpg' },
      { id: 11, name: '迷迭香', image: 'url-to-your-image/rosemary.jpg' },
      { id: 16, name: '薄荷', image: 'url-to-your-image/mint.jpg' },
      { id: 17, name: '罗勒', image: 'url-to-your-image/basil.jpg' },
      
    ]
  },
  {
    id: 7,
    name: '花束配件',
    flowers: [
      { id: 12, name: '丝带', image: 'url-to-your-image/ribbon.jpg' },
      { id: 13, name: '花瓶', image: 'url-to-your-image/vase.jpg' },
      { id: 18, name: '花泥', image: 'url-to-your-image/flower-foam.jpg' },
      { id: 19, name: '包装纸', image: 'url-to-your-image/wrapping-paper.jpg' },
      
    ]
  },
  {
    id: 8,
    name: '节日特惠',
    flowers: [
      { id: 14, name: '圣诞节特惠花束', image: 'url-to-your-image/christmas-special.jpg' },
      { id: 15, name: '情人节特惠花篮', image: 'url-to-your-image/valentines-special-basket.jpg' },
      { id: 20, name: '中秋节特惠月饼花束', image: 'url-to-your-image/mid-autumn-special.jpg' },
      { id: 21, name: '新年特惠大花篮', image: 'url-to-your-image/new-year-special-basket.jpg' },
      
    ]
  },
  {
    id: 9,
    name: '水生植物',
    flowers: [
      { id: 22, name: '荷花', image: 'url-to-your-image/lotus.jpg' },
      { id: 23, name: '睡莲', image: 'url-to-your-image/water-lily.jpg' },
      { id: 24, name: '富贵竹（水生）', image: 'url-to-your-image/lucky-bamboo-water.jpg' },
      { id: 25, name: '海芋', image: 'url-to-your-image/calla-lily.jpg' },
      
    ]
  },
  {
    id: 10,
    name: '热带植物',
    flowers: [
      { id: 26, name: '龟背竹', image: 'url-to-your-image/monstera.jpg' },
      { id: 27, name: '天堂鸟', image: 'url-to-your-image/strelitzia.jpg' },
      { id: 28, name: '散尾葵', image: 'url-to-your-image/areca-palm.jpg' },
      { id: 29, name: '绿萝女王', image: 'url-to-your-image/pothos-queen.jpg' },
      // 注意：绿萝女王是虚构的，用于示例
     
    ]
  },
  {
    id: 11,
    name: '多肉组合',
    flowers: [
      { id: 30, name: '宝石花组合', image: 'url-to-your-image/succulent-combo-1.jpg' },
      { id: 31, name: '玉吊钟组合', image: 'url-to-your-image/succulent-combo-2.jpg' },
      { id: 32, name: '沙漠玫瑰组合', image: 'url-to-your-image/succulent-combo-3.jpg' },
      { id: 33, name: '生石花组合', image: 'url-to-your-image/lithops-combo.jpg' },
      // 注意：上述组合名称及图片链接为虚构，用于示例
      
    ]
  },
  {
    id: 12,
    name: '空气凤梨',
    flowers: [
      { id: 34, name: '小精灵空气凤梨', image: 'url-to-your-image/air-plant-elf.jpg'},
      { id: 35, name: '老人须空气凤梨', image: 'url-to-your-image/air-plant-beard.jpg' },
      { id: 36, name: '银叶空气凤梨', image: 'url-to-your-image/air-plant-silver.jpg' },
      { id: 37, name: '卷叶空气凤梨', image: 'url-to-your-image/air-plant-curly.jpg' },
      // ...更多空气凤梨
    ]
  },
  {
    id: 13,
    name: '花卉种子',
    flowers: [
      { id: 38, name: '玫瑰种子', image: 'url-to-your-image/rose-seed.jpg' },
      { id: 39, name: '向日葵种子', image: 'url-to-your-image/sunflower-seed.jpg' },
      { id: 40, name: '薰衣草种子', image: 'url-to-your-image/lavender-seed.jpg' },
      { id: 41, name: '郁金香种子', image: 'url-to-your-image/tulip-seed.jpg' },
      // ...更多花卉种子
    ]
  },
  // ...还可以继续添加更多类别
]);
 
const selectedCategory = ref(null);

const handleSelect = (index, indexPath) => {
  const category = categories.value.find(cat => cat.id.toString() === index);
  selectCategory(category);
};

function selectCategory(category) {
  selectedCategory.value = category;
  // 如果需要，可以在这里添加路由跳转逻辑
  // router.push(`/category/${category.name}`);
}

function addToCart(flower) {
  console.log(`添加 ${flower.name} 到购物车`);
  // 这里可以添加实际的加入购物车逻辑，如更新购物车状态等
}
</script>

<style scoped>
.el-aside {
  width: 200px; /* 侧边栏宽度 */
  background-color: #f4f4f4;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 确保侧边栏内容可以滚动 */
}

.el-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto; /* 确保主内容区域可以滚动 */
  min-height: 0; /* 允许高度缩小 */
  max-height: 100vh; /* 设置最大高度限制 */
  overflow-y: auto; /* 确保内容可以滚动 */
}
.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden; /* 防止内容溢出 */
}
 
.page-content {
  display: flex;
  flex-direction: row; /* 横向布局 */
  width: 70%; /* 限制页面内容的最大宽度 */
  max-width: 1200px; /* 进一步限制最大宽度以适应不同屏幕尺寸 */
  box-sizing: border-box; /* 包括padding和border在内计算宽度和高度 */
  
  /* 如果需要，可以添加背景色或其他样式 */
  background-color: #fff; /* 示例背景色 */
  border: 1px solid #ccc; /* 示例边框 */
  border-radius: px; /* 示例圆角 */
}
 


.sidebar {
  width: 150px; /* 减小侧边栏宽度 */
  padding: 20px;
  background-color: #f4f4f4;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.sidebar-content {
  max-height: calc(100vh - 40px);
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s;
}

.sidebar li:hover, .sidebar li.active {
  background-color: #eee;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.flower-item {
  display: flex;
  align-items: center;
  margin: 10px;
  gap: 10px; /* 减小图片和详情之间的间距 */
  width: calc(33.333% - 20px); /* 三列布局 */
  width: calc(33.333% - 20px); /* 调整为更合适的宽度 */

}

.flower-image {
  width: 150px; /* 减小图片宽度 */
  height: 150px;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.flower-image:hover {
  transform: translateY(-5px);
}

.flower-details {
  flex: 1;
}

.flower-name {
  font-size: 1.2em;
  font-weight: bold;
}

.flower-description {
  margin: 5px 0;
  font-size: 0.9em;
  color: #666;
}

.flower-price {
  margin: 5px 0;
  font-size: 1em;
  color: #666;
}

.el-button {
  margin-top: 10px;
  padding: 8px 16px;
}

@media (max-width: 768px) {
  .flower-item {
    width: calc(50% - 20px); /* 两列布局在小屏幕上 */
  }
}
.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden; /* 防止内容溢出 */
}

.page-content {
  display: flex;
  flex-direction: row; /* 横向布局 */
  width: 70%; /* 限制页面内容的最大宽度 */
  max-width: 1200px; /* 进一步限制最大宽度以适应不同屏幕尺寸 */
  box-sizing: border-box; /* 包括padding和border在内计算宽度和高度 */
  background-color: #fff; /* 示例背景色 */
  border: 1px solid #ccc; /* 示例边框 */
  border-radius: 8px; /* 示例圆角 */
}

.sidebar {
  width: 200px; /* 侧边栏宽度 */
  background-color: #f4f4f4;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 允许垂直滚动 */
  max-height: 100vh; /* 设置最大高度 */
}

.sidebar-content {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar li {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s;
}

.sidebar li:hover,
.sidebar li.active {
  background-color: #eee;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto; /* 允许主内容区域垂直滚动 */
}

.flower-item {
  display: flex;
  align-items: center;
  margin: 10px;
  gap: 10px; /* 减小图片和详情之间的间距 */
  width: calc(33.333% - 20px); /* 三列布局 */
}

.flower-image {
  width: 150px; /* 减小图片宽度 */
  height: 150px;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.flower-image:hover {
  transform: translateY(-5px);
}

.flower-details {
  flex: 1;
}

.flower-name {
  font-size: 1.2em;
  font-weight: bold;
}

.flower-description {
  margin: 5px 0;
  font-size: 0.9em;
  color: #666;
}

.flower-price {
  margin: 5px 0;
  font-size: 1em;
  color: #666;
}

.el-button {
  margin-top: 10px;
  padding: 8px 16px;
}

@media (max-width: 768px) {
  .flower-item {
    width: calc(50% - 20px); /* 两列布局在小屏幕上 */
  }
}
</style>